<template>
	<view class="" style="">
		<view class="profitbg">
			<view class="profitchart">
				<!-- <view class="">{{$t('profit.name2')}}</view> -->
				<view class="charts-box">
					<view style="width: 100%; height:560rpx;margin-top: -40rpx;"><l-echart ref="chart"></l-echart></view>
				</view>
				<!-- <view class="" v-else style="display: flex;justify-content: center;margin-top: 30rpx;">
					<image style="width: 300rpx;height: 460rpx;" src="@/static/noneLine.png" mode="heightFix"></image>
				</view> -->
			</view>
		</view>
		<view class="profitbotbg">
			<view class="profitnum" style="margin-top: 0;">
				<view class="profitbot">
					<view class="profitbottxt flex-between">
						<view class="">5{{$t("miner.name2")}}{{$t("miner.name4")}}</view>
						<view class="num">{{datainfo.hs5}}H/s</view>
					</view>
					<view class="profitbottxt flex-between">
						<view class="">24{{$t("miner.name3")}}{{$t("miner.name4")}}</view>
						<view class="num">{{datainfo.hs24}}H/s</view>
					</view>
					<view class="profitbottxt flex-between">
						<view class="">{{$t("miner.name5")}}</view>
						<view class="num">{{datainfo.pingLoss}}%</view>
					</view>
					<!-- <view class="profitbottxt flex-between">
						<view class="">{{$t("miner.name6")}}</view>
						<view class="num">{{datainfo.monthIncome}}</view>
					</view> -->
					<!-- <view class="profitbottxt flex-between">
						<view class="">{{$t("miner.name7")}}</view>
						<view class="num">{{datainfo.monthIncome}}</view>
					</view> -->
					<view class="profitbottxt flex-between">
						<view class="">{{$t("miner.name8")}}</view>
						<view class="num">{{datainfo.day}}</view>
					</view>
					<view class="profitbottxt flex-between">
						<view class="">{{$t("miner.name9")}}</view>
						<view class="num">{{datainfo.money}}</view>
					</view>
					<view class="profitbottxt flex-between">
						<view class=""></view>
						<view class="num" style="display: flex;align-items: center;" @click="del()"> {{$t('miner.name15')}}<image src="/static/del.png" style="width: 30rpx;height: 30rpx;" mode=""></image> </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				chartData: {},
				option: {
					tooltip: {
						trigger: 'axis',
						textStyle:{
							color:'#fff',
							fontSize:9,
						},
						position: function (point) {
							return [point[0], '30%']; // 将 tooltip 固定在顶部 10% 的位置
						},
						padding: [
						    5,  // 上
						    20, // 右
						    5,  // 下
						    10, // 左
						],
						confine:true,
						backgroundColor: '#5555ff',
						formatter: function(params) {
							var color = params[0].color; // 获取数据项的颜色
							var symbol = '●'; // 自定义小圆点的形状
							var relVal = params[0].name;
							for (var i = 0, l = params.length; i < l; i++) {
								relVal += '\n'+params[i].marker+params[i].seriesName + ' : ' + params[i].value + ' H/s';
							}
							return relVal;	
						}
					},
					textStyle: {
						color: '#fff',
						fontSize:9,
					},
					legend: {
						data: ['Email', 'Temperature'],
						show:false,
						lineStyle: {
							color: 'rgba(255, 255, 255, 0.2)',
							fontSize:9,
						}
					},
					grid: {
						left: '0%',
						right: '0%',
						bottom: '6%',
						containLabel: true,
						show: true,
						borderColor: 'rgba(255, 255, 255, 0.2)',
						
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						splitArea:{
							areaStyle:{
								color:['rgba(255, 255, 255, 0.2)']
							}
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.2)',
								width: 1
							},
							
						},
						axisLabel: {
							color: '#fff',
							fontSize:9,
						}
					}],
					yAxis: [{
							name: "H/s",
							nameTextStyle:{
								align:'right',
							},
							type: 'value',
							show: true,
							splitArea:{
								areaStyle:{
									color:['rgba(255, 255, 255, 0.2)']
								}
							},
							axisLine: {
								lineStyle: {
									color: 'rgba(255, 255, 255, 0.2)',
									width: 1
								},
								
							},
							axisLabel: {
								color: '#fff',
								fontSize:9,
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: 'rgba(255, 255, 255, 0.2)', // 红色网格线
									type: 'solid'
								}
							}
						},
					],
					series: [{
							name: this.$t('miner.name10'),
							type: 'line',
							stack: 'Total',
							// areaStyle: {},
							smooth: true,
							showSymbol: false, // 取消线上标记点
							emphasis: {
								focus: 'series'
							},
							data: [120, 132, 101, 134, 90, 230, 210],
							lineStyle: {
								color: '#01afff'
							},
							itemStyle: {
								color: '#01afff'
							},
						},
					]
				
				},
				iconInfo: {
					totalIncome: 0,
					yesterIncome: 0,
					day: 0
				},
				lineData: [],
				day: 30,
				newDay: '',
				show:false,
				tabList:[],
				sel_name:'',
				sn:'',
				datainfo:{}
			};
		},
		watch: {
			lineData() {
				// this.xrDom()
			}
		},
		onLoad(option) {
			// this.day = this.$fun.getYMD()
			this.newDay = this.$fun.getYMD()
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
			// this.getTab()
			this.sn=option.sn
		},
		onShow() {
			
		},
		mounted() {
			this.getListLine()
		},
		methods: {
			getListLine() {
				this.$fun.ajax.post('butt/info', {
					sn: this.sn,
					day: this.day
				}).then(res => {
					if (res.code == 1) {
						let klinelist=uni.getStorageSync('klinelist')
						this.chartsDataLine1 = res.data.kline.up.length>0?res.data.kline:klinelist
						let up=[]
						if(klinelist){
							klinelist.up.map((item)=>{
								item=0
								up.push(item)
							})
						}
						this.chartsDataLine1.up=res.data.kline.up.length>0?res.data.kline.up:up
						console.log(klinelist)
						this.datainfo = res.data.info
						this.onUecharts();
					}
				})
			},
			onUecharts() {
				let datelist=[]
				this.chartsDataLine1.date.map((item)=>{
					datelist.push(item.substring(5,item.length-3))
				})
				this.option.xAxis[0].data = datelist
				this.option.series[0].data = this.chartsDataLine1.up
				this.option.xAxis[0].axisLabel.formatter= function(value,index){
					if(index === 0) {
						return '        ' + value;
					}
					if(index === datelist.length -1) {
						return value + '        ';
					}
					return value;
				}
				if(this.option.series[0].data.length==0){
					this.option.title= {
						text: this.$t('noData'),
						x: 'center',
						y: 'center',
						textStyle: {
						  fontSize: 12,
						  fontWeight: 'normal',
						  color:'#FFFFFF'
						}
					  }
				}
				// this.option.series[1].data = data
				this.$refs.chart.init(echarts, chart => {
					chart.setOption(this.option);
					
					
				});
			},
			del(){
				uni.showModal({
					// title: this.$t('tips'),
					content: this.$t('miner.name14'),
					success: (res) => {
						if (res.confirm) {
							this.$fun.ajax.post('butt/removeBind', {
								sn: this.sn
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
									setTimeout(()=>{
										uni.navigateBack()
									},1000)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		// height: 100%;
		// background: url('/static/imgbgc2.png') no-repeat;background-size: 100% 100%;
		overflow-y: scroll;
		background-color: #FFFFFF;
	}

	.profitbg {
		width: 750rpx;
		// height: 530rpx;
		background: linear-gradient(180deg, #3c62e1 0%, #5694f8 100%);
	}

	.profit {
		width: 690rpx;
		height: 158rpx;
		// background: linear-gradient(180deg, #5990FF 0%, #55aaff 100%);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		margin: 20rpx auto 0;
		position: relative;

		&_top {
			text-align: center;
			padding-top: 30rpx;
		}

		.name {
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}

		.num {
			font-weight: 500;
			font-size: 60rpx;
			color: #FFFFFF;
		}

		.right {
			font-weight: 500;
			font-size: 20rpx;
			width: 124rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			background: #5990FF;
			border-radius: 0rpx 24rpx 0rpx 24rpx;
			color: #FFFFFF;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.profitTtime {
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		width: 750rpx;
		height: 88rpx;
		align-items: center;
		// background: #FFFFFF;

		image {
			width: 28rpx;
			height: 28rpx;
		}

		.left {
			display: flex;
			align-items: center;
		}

		.right {
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.profitkk {
		width: 690rpx;
		// height: 380rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		margin: 0 auto;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 40rpx 30rpx;
		position: relative;
	
		.txt {
			width: 80%;
			text-align: center;
		}
	
		.num {
			font-weight: 500;
			font-size: 32rpx;
			color: #232323;
			margin-top: 18rpx;
	
			span {
				font-weight: 500;
				font-size: 20rpx;
				color: #999999;
				margin-right: 30rpx;
			}
		}
	}

	.profitchart {
		width: 750rpx;
		// height: 400rpx;
		// background: #FFFFFF;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 20rpx 22rpx;

		.charts-box {
			width: 100%;
			// height: 466rpx;
			// padding-right: 30rpx;
		}
	}
	.profitbotbg{
		background-color: #FFFFFF;
		// border-radius: 20rpx 20rpx 0 0;
		// margin-top: -60px;
		// padding-top: 40px;
	}
	.profitbot{
		font-size: 24rpx;
		font-weight: 400;
		padding: 0 30rpx;
		.profitbottitle{
			font-size: 32rpx;
			font-weight: 600;
			color: #232323;
			
			margin-bottom: 20rpx;
		}
		.profitbottxt{
			margin-top: 30rpx;
			color: #818181;
			.num{
				color: #232323;
			}
		}
	}
	.profitnum {
		// width: 690rpx;
		// height: 366rpx;
		// background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-weight: 600;
		font-size:26rpx;
		color: #232323;
		margin: 0 auto;
		margin-top: 80rpx;
		padding: 30rpx 0;
		.isname{
			// height: 80rpx;
			line-height: 60rpx;
			background-color: #f7f7f7;
			padding: 0 30rpx;
		}
		.charts-box {
			width: 100%;
			height: 266rpx;
			margin-top: 20rpx;
		}
	}

	.profitdetail {
		width: 690rpx;
		margin: 10rpx auto 20rpx;

		.name {
			font-weight: 600;
			font-size: 32rpx;
			color: #232323;
			margin-top: 30rpx;
		}

		.tabname {
			font-weight: 500;
			font-size: 24rpx;
			color: #5990FF;
			display: flex;
			align-items: center;
			text-align: center;
			height: 60rpx;
			background: #00aaff10;
			padding: 0 20rpx 0 10rpx;
			margin-top: 20rpx;

			view {
				width: 25%;
			}
		}

		.list {
			width: 690rpx;
			height: 100rpx;
			// background:  rgba(68, 78, 99, 0.7);
			font-weight: 400;
			font-size: 24rpx;
			color: #232323;
			display: flex;
			align-items: center;
			text-align: center;

			.col {
				color: #5990FF;
			}

			view {
				width: 25%;
			}

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>